<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>构造器-methods-example</title>
</head>
<body>
    <div id="example-1">
        <input type="text" v-model="message">

    </div>

    <script src="../lib/vue.js"></script>
    <script>

        /*
        * 在vue中，每个vue实例都会代理 data 对象中的所有属性
        * 除了数据属性，Vue实例暴露了一些有用的实例属性与方法，这些属性与方法都有前缀 “$” ，以便与代理的属性区分
        * */
        var data = {message : "hello vue.js"}

        var vm = new Vue({
            el : "#example-1",
            data : data
        });

        vm.$data === data; //true
        vm.$el === document.getElementById("example-1"); //true

        // $watch 是一个实例方法
        vm.$watch('message', function (newVal, oldVal) {
            // 这个回调将在 `vm.a`  改变后调用
            vm === this;  //true
            console.log(this);
            console.log(newVal+"^"+oldVal);
        })
        //vue.js Api文档地址：http://v1-cn.vuejs.org/api/
    </script>
</body>
</html>